<script setup lang="ts">
  import { useNow } from '@vueuse/core';
  import dayjs from 'dayjs';

  const now = useNow();

  const formatStr = 'YYYY-MM-DD HH:mm:ss';

  const props = defineProps<{
    status: any;
  }>();
</script>

<template>
  <div class="time-box">
    <a-badge v-if="status === 'CONNECTING'" status="processing" text="连接中" />
    <a-badge v-else-if="status === 'OPEN'" status="success" text="连接成功" />
    <a-badge v-else-if="status === 'CLOSED'" status="warning" text="未连接" />
    <span> {{ dayjs(now.value).format(formatStr) }}</span>
  </div>
</template>

<style lang="less">
  .time-box {
    font-size: 18px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding: 0 40px;

    .arco-badge-status-text {
      color: #f5f5f5 !important;
    }
  }
</style>
